<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">店铺商品分类</h2>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">名称：</label>
                    <div class="layui-input-inline mr0">
                        <input id="name" class="layui-input" placeholder="输入名称"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-active="doQuery">查询</button>
                    <button class="layui-btn" lay-active="doAdd">新增</button>
                </div>
            </div>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table theme-table" id="tableElement" lay-filter="tableElement"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="toolTpl">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--弹窗-->
<script type="text/html" id="modelTpl">
    <form id="modelTplForm" lay-filter="modelTplForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">上级数据</label>
            <div class="layui-input-block">
                <input id="parentPath" name="parentId" placeholder="请选择" readonly lay-verify="required"/>
                <input id="parentId" name="parentId" type="hidden"/>
                <input id="path" name="path" type="hidden"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">分类名称</label>
            <div class="layui-input-block">
                <input name="name"  placeholder="请输入分类名称" class="layui-input "
                       maxlength="20"
                       lay-verify="required"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">排序</label>
            <div class="layui-input-block">
                <input name="sort" placeholder="请输入排序值" type="number" class="layui-input" min="0" max="1000"
                       lay-verify="required|hx" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="editTplSubmit" lay-submit>保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </div>
    </form>
</script>

<script>
    layui.use(['layer', 'form', 'tools', 'admin', 'treeTable', 'cascader'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        let tools = layui.tools;
        var cascader = layui.cascader;
        var insTb;
        let methods = {
            renderTable: function () {
                // 渲染表格
                insTb = treeTable.render({
                    elem: '#tableElement',
                    tree: {
                        iconIndex: 0,  // 折叠图标显示在第几列
                        idName: 'id',  // 自定义id字段的名称
                        pidName: 'parentId',  // 自定义标识是否还有子节点的字段名称
                        isPidData: true  // 是否是pid形式数据
                    },
                    cellMinWidth: 100,
                    cols: [
                        {field: 'name', title: '名称'},
                        {field: 'sort', title: '排序'},
                        {field: 'status', title: '状态',templet:function (row) {
                            return "1"==row.status?"显示中":"不显示";
                        }},
                        {templet: '#toolTpl', title: '操作', align: 'center'}
                    ],
                    reqData: function (data, callback) {
                        tools.getJSON({
                            url: '/mall/api/seller/cate/list',
                            params: {}
                        }).done(function (res) {
                            if ('0' == res.code) {
                                callback(tools.parseData(res).data);
                            } else {
                                layer.msg(res.message, {icon: 0});
                            }
                        });
                    }
                });
            },
            toolEvent: function () {
                // 工具条点击事件
                treeTable.on('tool(tableElement)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    if (layEvent === 'edit') { // 修改
                        methods.showEditModel(data);
                    } else if (layEvent === 'del') { // 删除
                        methods.doDel(data.id);
                    }
                });
            },
            doQuery: function () {
                var keyword = $('#name').val();
                if (keyword) {
                    insTb.filterData(keyword);
                } else {
                    insTb.clearFilter();
                }
            },
            doAdd: function () {
                methods.showEditModel();
            },
            showEditModel: function (data) {
                let isEdit = data ? true : false;
                // 显示表单弹窗
                admin.popupRight({
                    title: (isEdit ? '修改' : '添加') + '商品分类',
                    content: $('#modelTpl').html(),
                    success: function (layero, dIndex) {
                        // 回显数据
                        if (isEdit) {
                            if (data.scaling == '0') {
                                data.scaling = ''
                            }
                            form.val('modelTplForm', data);
                            $("#parentPath").val(data.parentId);
                        }
                        methods.editModel(isEdit, dIndex);
                    }
                });
            },
            editModel: function (isEdit, dIndex) {
                let url = isEdit ? '/mall/api/seller/cate/edit' : '/mall/api/seller/cate/add';
                //初始化上级数据组件
                tools.getJSON({
                    url: '/mall/api/seller/cate/findCascodeList',
                    params: {operateType: 1, level: 2}
                }).done(function (res) {
                    res.data.unshift({value: '0', label: '顶级数据'});
                    var cascaderParams = {
                        elem: '#parentPath',
                        data: res.data,
                        changeOnSelect: true,
                        filterable: true,
                        onChange: function (path, obj) {
                            let val = obj.value;
                            $('#parentId').val(val);
                            $("#path").val(path);
                        }
                    };
                    if (isEdit) {
                        cascaderParams.disabled = true;
                    }
                    cascader.render(cascaderParams)
                })
                // 表单提交事件
                form.on('submit(editTplSubmit)', function (data) {
                    data.field.parentPath = data.field.parentPath || 0;
                    layer.load(2)
                    tools.postJSON({url: url, params: data.field}).done(function (res) {
                        layer.closeAll('loading');
                        if (res.code == 0) {
                            layer.close(dIndex);
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    })
                    return false;
                });
            },
            doDel: function (id) {
                layer.confirm('确定删除吗?', function () {
                    tools.deleteJSON({url: '/mall/api/seller/cate/del/' + id}).done(function (res) {
                        if (res.code == 0) {
                            layer.closeAll();
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    })
                })
            }
        }
        methods.renderTable();
        methods.toolEvent();
        tools.event(methods);
    });
</script>


